<template>
  <div class="songlist">
    <!-- 筛选 -->
    <div class="filter-box clearfix">
      <div class="filter-group language-group">
        <div class="title">
          <span class="iconfont icon-10"></span>
          语种
        </div>
        <div>
          <ul class="filter-ul">
            <li v-for="song in label1Arr" :key="song.name">
              <span
                class="item songll"
                @click="obtainPlay(song.name, song.resourceCount)"
                :class="labelStatus == song.name ? 'activelabrl' : ''"
                >{{ song.name }}</span
              >
            </li>
            <li class="item-hover">
              <span class="item songll anyitem">暂无更多</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="filter-group">
        <div class="title">
          <span class="iconfont icon-cd"></span>
          风格
        </div>
        <div>
          <ul class="filter-ul">
            <li v-for="song in label2Arr" :key="song.name">
              <span
                class="item songll"
                @click="obtainPlay(song.name, song.resourceCount)"
                :class="labelStatus == song.name ? 'activelabrl' : ''"
                >{{ song.name }}</span
              >
            </li>
            <li>
              <span class="item songll anyitem">暂无更多</span>
              <div class="item-more" ref="more">
                <ul>
                  <li v-for="song in label2Arr" :key="song.name">
                    <span class="item songll">{{ song.name }}</span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="filter-group">
        <div class="title">
          <span class="iconfont icon-fengche"></span>
          场景
        </div>
        <div>
          <ul class="filter-ul">
            <li v-for="song in label3Arr" :key="song.name">
              <span
                class="item songll"
                @click="obtainPlay(song.name, song.resourceCount)"
                :class="labelStatus == song.name ? 'activelabrl' : ''"
                >{{ song.name }}</span
              >
            </li>
            <li>
              <span class="item songll anyitem">暂无更多</span>
              <div class="item-more1">
                <ul>
                  <li v-for="song in label3Arr" :key="song.name">
                    <span class="item songll">{{ song.name }}</span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="filter-group">
        <div class="title">
          <span class="iconfont icon-heart"></span>
          情感
        </div>
        <div>
          <ul class="filter-ul">
            <li v-for="song in label4Arr" :key="song.name">
              <span
                class="item songll"
                @click="obtainPlay(song.name, song.resourceCount)"
                :class="labelStatus == song.name ? 'activelabrl' : ''"
                >{{ song.name }}</span
              >
            </li>
            <li>
              <span class="item songll anyitem">暂无更多</span>
              <div class="item-more2">
                <ul>
                  <li v-for="song in label4Arr" :key="song.name">
                    <span class="item songll">{{ song.name }}</span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="filter-group">
        <div class="title">
          <span class="iconfont icon-san"></span>
          主题
        </div>
        <div>
          <ul class="filter-ul">
            <li v-for="song in label5Arr" :key="song.name">
              <span
                class="item songll"
                @click="obtainPlay(song.name, song.resourceCount)"
                :class="labelStatus == song.name ? 'activelabrl' : ''"
                >{{ song.name }}</span
              >
            </li>
            <li>
              <span class="item songll anyitem">暂无更多</span>
              <div class="item-more3">
                <ul>
                  <li v-for="song in label5Arr" :key="song.name">
                    <span class="item songll">{{ song.name }}</span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 标题 -->
    <div class="list-head clearfix">
      <h2>
        {{ cat ? cat : '全部歌单' }}
        <i @click="overList">{{ cat !== '全部歌单' ? 'x' : '' }}</i>
      </h2>
    </div>
    <!-- 歌单样式 -->
    <div class="song-list-box clearfix">
      <div
        class="content-item"
        @click="toSlist(item.id)"
        v-for="item in playlist"
        :key="item.id"
      >
        <div class="poster">
          <div class="in-image">
            <img v-lazy="item.coverImgUrl" class="el-img" />
          </div>
          <div class="shubiaoyirushijian">
            <span></span>
          </div>
        </div>
        <div class="iten">{{ item.name }}</div>
      </div>
    </div>
    <!-- 分页 -->
    <div>
      <Pagination
        :pageConfig="{
          total: limit,
          showPageNo: 5,
          pageNo,
          pageSize,
        }"
        @changCurrentPage="getPayList"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SongList',
  data() {
    return {
      label1Arr: [],
      label2Arr: [],
      label3Arr: [],
      label4Arr: [],
      label5Arr: [],
      label2: [],
      label3: [],
      label4: [],
      label5: [],
      songlistID: '', // 歌单id
      pageSize:50,
      pageNo:1,
      limit: 50, // 总数量
      offset:1,// 偏移数量
      cat: '全部歌单', // 歌单类别
      labelStatus: false
    }
  },
  computed: {
    ...mapState({
      songlistArr: state => state.songlist.songlistArr,
      playlist: state => state.songlist.playlist
    })
  },
  // 页面的渲染完毕后的生命周期回调
  mounted() {
    // 获取歌单数据
    this.getPayList()
    const label1Arr = this.songlistArr.reduce((pre, item) => {
      if (item.category === 0) {
        pre.push(item)
      }
      return pre
    }, [])
    const label2Arr = this.songlistArr.reduce((pre, item) => {
      if (item.category === 1) {
        pre.push(item)
      }
      return pre
    }, [])
    const label3Arr = this.songlistArr.reduce((pre, item) => {
      if (item.category === 2) {
        pre.push(item)
      }
      return pre
    }, [])
    const label4Arr = this.songlistArr.reduce((pre, item) => {
      if (item.category === 3) {
        pre.push(item)
      }
      return pre
    }, [])
    const label5Arr = this.songlistArr.reduce((pre, item) => {
      if (item.category === 4) {
        pre.push(item)
      }
      return pre
    }, [])
    this.label1Arr = label1Arr
    //  this.label2Arr=label2Arr.slice(5,18)
    //  this.label3Arr=label3Arr.concat(label4Arr)
    this.label2Arr = label2Arr.slice(0, 8)
    this.label2 = label2Arr.slice(9, label2Arr.lengt - 1)

    this.label3Arr = label3Arr.slice(0, 8)
    this.label3 = label3Arr.slice(9, label3Arr.lengt - 1)

    this.label4Arr = label4Arr.slice(0, 8)
    this.label4 = label4Arr.slice(9, label4Arr.lengt - 1)

    this.label5Arr = label5Arr.slice(0, 8)
    this.label5 = label5Arr.slice(9, label5Arr.lengt - 1)
    // 获取歌单数据
  },
  methods: {
    // 更新数据
    getPayList(off=1) {
        this.offset=off*50
        // let offSet=off*50
       const {cat,offset}= this
      this.$store.dispatch('songlist/getSongListConter', { cat,offset })
    },
    // 展示隐藏的样式暂未做
    // this.$refs.more.style.display = "block";
    // 前往歌单详情
    toSlist(songId) {
      // 保存id值
      this.songlistID = songId * 1
      // console.log(this.songlistID)
      this.$store.dispatch('songlist/getTrackIdList', this.songlistID)
      this.$router.push({ path: `songlist/${this.songlistID}` })
    },
    // 清除回复到全部歌单
    overList() {
      this.cat = '全部歌单'
      // 更新数据
      this.getPayList()
    },
    // 获取点击标签和增加点触样式
    obtainPlay(cat,limit) {
      // 获取标签值
      this.cat = cat
      this.limit = limit
      
      // 获取当前点击的标签
      this.labelStatus = cat
      if (this.cat === 1) return
      // 更新数据
      this.getPayList()
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
// 通用样式
* {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 400;
  box-sizing: border-box;
}
.songll {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  max-width: 100%;
}
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  line-height: 0;
}
// 歌单页面样式
.songlist {
  width: 1200px;
  margin: 0 auto;
  // 筛选样式
  .filter-box {
    margin: 40px -10px 0 0;
    .filter-group.language-group {
      margin-left: 0;
      width: 160px;
      float: left;
    }
    .filter-group {
      margin-left: 22px;
      width: 240px;
      float: left;
      .title {
        font-weight: 600;
        margin-bottom: 5px;
      }
      .filter-ul {
        font-size: 13px;
        display: flow-root;
        overflow: hidden;

        .item-more {
          display: none;
        }
        .item-more,
        .item-more1,
        .item-more2,
        .item-more3 {
          overflow: hidden;
          width: 350px;
          background: #fff;
          position: absolute;
          top: 35px;
          left: 432px;
          transform-origin: center bottom;
          z-index: 2000;
          padding: 12px;
          border-radius: 1%;
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          ul {
            font-size: 13px;
            display: flex;
            flex-wrap: wrap;
            li {
              margin: 5px;
            }
          }
        }
        .item-more1 {
          display: none;

          transform-origin: center top;
          z-index: 2009;
          top: 263px;
          left: 694px;
        }
        .item-more2 {
          display: none;
          z-index: 2000;
          top: 74px;
          left: 956px;
          transform-origin: center bottom;
        }
        .item-more3 {
          display: none;

          top: 74px;
          left: 1218px;
          transform-origin: center bottom;
          z-index: 2011;
        }
        li {
          margin: 10px 10px 0 0;
          float: left;
          .item {
            display: block;
            width: 70px;
            padding: 0 2px;
            height: 30px;
            line-height: 30px;
            border-radius: 20px;
            background: #f8f8f8;
            text-align: center;
            cursor: pointer;
          }
          .anyitem{
           color: #909399;
          }
          .activelabrl {
            background: rgb(250, 77, 77) !important;
            color: #fff;
          }
        }
      }
    }
  }
  // 题目样式
  .list-head {
    margin-top: 55px;
    h2 {
      font-size: 28px;
    }
  }
  // 歌单样式
  .song-list-box {
    display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
    .content-item {
      margin: 25px 8px;
      width: 224px;
      cursor: pointer;
      .poster {
        width: 224px;
        position: relative;
        overflow: hidden;
        .in-image {
          width: 100%;
          height: 100%;

          .el-img {
            width: 100%;
            height: 100%;
          }
          .el-img:hover {
            transform: scale(1.1);
            transition: all 0.5s ease-out;
          }
        }
      }
      .iten {
        margin-top: 18px;
        font-size: 16px;
        height: 26px;
        line-height: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
